<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="130px">
      <el-form-item label="树表(可选)" prop="formKey">
        <el-select v-model="form.formKey" @change="formKeyChange" clearable placeholder="请选择">
          <el-option v-for="item,index in formList" :key="index" :label="item.name" :value="item.formKey"></el-option>
        </el-select>
      </el-form-item>
      <div v-if="form.formKey&&columns[form.formKey]">
        <el-form-item label="列表删除后刷新树" prop="formKey">
          <el-switch v-model="form.refreshByDel"/>
        </el-form-item>
        <el-form-item label="父节点" prop="parentKey">
          <el-select v-model="form.parentKey"  placeholder="请选择">
            <el-option v-for="item,index in columns[form.formKey]" :key="index" :label="item.columnTitle" :value="item.columnName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="唯一值" prop="idKey">
          <el-select v-model="form.idKey"  placeholder="请选择">
            <el-option v-for="item,index in columns[form.formKey]" :key="index" :label="item.columnTitle" :value="item.columnName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="节点值" prop="valueKey">
          <el-select v-model="form.valueKey"  placeholder="请选择">
            <el-option v-for="item,index in columns[form.formKey]" :key="index" :label="item.columnTitle" :value="item.columnName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="节点名称" prop="labelKey">
          <el-select v-model="form.labelKey"  placeholder="请选择">
            <el-option v-for="item,index in columns[form.formKey]" :key="index" :label="item.columnTitle" :value="item.columnName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="orderBy">
          <el-select v-model="form.orderBy"  placeholder="请选择">
            <el-option v-for="item,index in columns[form.formKey]" :key="index" :label="item.columnTitle" :value="item.columnName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序方式" prop="orderDir">
          <el-radio-group v-model="form.orderDir" size="mini">
           <el-radio-button label="asc">顺序</el-radio-button>
           <el-radio-button label="desc">倒序</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="查询条件" prop="defaultConditions">
          <preview v-if="schema.body[0].fields.length" ref="preview" :previewConfig="{schema}" />
        </el-form-item>
      </div>
    </el-form>
    <div style="height: 220px;" />
  </div>
</template>

<script>
  import {
    details
  } from "@/api/tool/formManage";

  import preview from "@/views/tool/view/index.vue";
  import {getConditionsFields} from "@/utils/amisUtil.js";
  export default {
    name: 'apiInfo',
    components: {
      preview
    },
    props: {
      formList: {
        type: Array,
        defulat: () => []
      },
      treeConfig: {
        type: Object,
        defulat: ()=>{}
      },
    },
    data() {
      return {
        formTemp: {
          formKey: '',
          refreshByDel:false,
          parentKey: '',
          idKey: '',
          valueKey: '',
          labelKey: '',
          orderBy: '',
          orderDir:'asc',
          defaultConditions: {}
        },
        form:{},

        columns:{},

        rules: {
          parentKey: [{
            required: true,
            message: '请选择',
            trigger: 'blur'
          }],
          idKey: [{
            required: true,
            message: '请选择',
            trigger: 'blur'
          }],
          valueKey: [{
            required: true,
            message: '请选择',
            trigger: 'blur'
          }],
          labelKey: [{
            required: true,
            message: '请选择',
            trigger: 'blur'
          }]
        },
        schema: {
          "type": "form",
          "name": 'conditionsForm',
          "data": {},
          "debug": true,
          "wrapWithPanel": false,
          "body": [
            {
              "type": "condition-builder",
              "name": "conditions",
              "fields": [],
            }
          ]
        }
      };
    },
    created() {
      this.form={...this.formTemp}
      setTimeout(() => {
        if (this.treeConfig) {
          this.formKeyChange(this.treeConfig.formKey)
          this.form = this.treeConfig
          this.schema.data.conditions=this.treeConfig.defaultConditions
        }
      }, 1500)
    },
    methods: {
      //获取表单字段
      formKeyChange(formKey) {
        console.log(formKey,'opioiojihjuihnu');
        this.form={...this.formTemp,formKey}
        if(!formKey){
          return
        }
        if (!this.columns[formKey]) {
          details(formKey).then(res => {
            if (res.code == 200) {
              if(res.data){
                this.columns[formKey] = res.data.columns.map(item=>{
                  item.columnName=item.columnName
                  return item
                })
                this.schema.body[0].fields = getConditionsFields(this.columns[formKey])
                this.$forceUpdate()
              }
            }
          })
        }else{
          this.schema.body[0].fields = getConditionsFields(this.columns[formKey])
        }
      },
      submit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if(this.form.formKey){
              this.$refs.preview.getValues('conditionsForm').then(res => {
                this.form.defaultConditions = res.conditions||{}
                this.$emit('setValue', {
                  tabType: 'treeConfig',
                  formData: this.form
                })
              })
            }else{
              this.form.refreshByDel=false
              this.$emit('setValue', {
                tabType: 'treeConfig',
                formData: this.form
              })
            }
          }
        });
      },
    }
  };
</script>
<style lang='scss' scoped>

</style>
